<template>
  <div class="container">
    <view v-if="true" class="slVote">
      <uv-navbar title="顺联投票" :autoBack="true" bgColor="linear-gradient(to right, #fef8ee, #e6fefc)" placeholder></uv-navbar>
      <view class="title flex alignCenter">
        <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/31/17303646585584792.png" width="24px" height="24px"></uv-image>
        <text class="fz18 bold rankings">热力榜单</text>
      </view>

      <view class="flex justifyBetween top">
        <view class="grid" v-for="(item,index) in hotList" :key="index" @click="proxy.$utils.toLink(`/packagePages/dynamic/listDetails?id=${item.voteId}`)">
          <view class="cover positionRelative">
            <image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/31/17303651431206384.png" mode="widthFix" />
            <view class="playPrice flex alignCenter">
              <uv-icon name="eye" color="#fff" size="10"></uv-icon>
              <text>{{item.voteCount }}</text>
            </view>

            <view class="info flex alignCenter fz12">
              <uv-avatar :src="item.avatar" size="20"></uv-avatar>
              <view class="name">{{item.userName}}</view>
              <uv-image v-if="item.isVip==1" src="https://oss.seenlove.com/images/8435602511c173bf5bf6dc85e8669930.png" width="23px" height="10px"></uv-image>
            </view>

            <view class="level">
              <uv-image v-if="index==0" src="https://oss.seenlove.com/images/423de52710cddf146f112c4bf9d48ffa.png" width="46px" height="58px"></uv-image>
              <uv-image v-else-if="index==1" src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/11/14/17315954219913571.png" width="46px" height="58px"></uv-image>
              <uv-image v-else src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/11/14/17315962902133920.png" width="46px" height="58px"></uv-image>
            </view>
          </view>
          <view class="data">
            <view class="title fz14">{{item.voteName}}</view>
            <view class="flex alignCenter justifyBetween">
              <view class="flex alignCenter fz2">
                <uv-icon name="star-fill" color="#F6CD38"></uv-icon>
                <text class="fz12" style="color: #8D9090;">{{item.score}}</text>
              </view>
              <view class="btn fz12">投票</view>
            </view>
          </view>
        </view>
      </view>

      <view class="LatestRankings bold fz18">最新榜单</view>

      <!-- 最新榜单 -->
      <view v-for="(item,index) in list" :key="index" style="margin-bottom: 15px;">
        <voteItem :item="item"></voteItem>
      </view>

      <uv-load-more :status="status" />
    </view>

    <uv-back-top :scroll-top="scrollTop"></uv-back-top>
  </div>
</template>

<script setup lang="ts">
import voteItem from "@/pages/tabbar/tabbar-2/components/voteItem.vue";
import showImages from "@/components/main/showImages.vue";
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();
const { proxy } = getCurrentInstance();

let scrollTop = ref(0);
let list = ref([]);
let status = ref("loadmore");
let totalPages = 0;
let params = {
  page: 1,
  pageSize: 10,
};
let hotList = ref([]);

onLoad(() => {
  getVotes();
  getHotVotes();
});

onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});

onReachBottom(() => {
  getMore();
});

onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});

async function getHotVotes() {
  hotList.value = await proxy.$apis.getHotVotes();
}

async function getVotes() {
  try {
    status.value = "loading";
    let resp = await proxy.$apis.getVotes(params);
    if (resp.records.length) {
      list.value = proxy.$utils.filterArr([...list.value], resp.records, "id");
    }
    totalPages = resp.totalPages;
    //console.log("getVotes", resp);
  } catch (error) {
  } finally {
    status.value = "nomore";
  }
}

function getMore() {
  if (params.page >= totalPages) return;
  params.page++;
  getVotes();
}
</script>


<style lang="scss">
page {
  background: linear-gradient(to right, #fef8ee, #e6fefc);
}
</style>
<style lang="scss" scoped>
::v-deep .uv-navbar {
  .uv-navbar__content {
    background-color: transparent !important;
  }
}
.slVote {
  padding: 15px;
  .rankings {
    color: #363d4e;
    margin-left: 8px;
  }
  .top {
    margin-top: 20px;
    .grid {
      width: calc((100% - 15px) / 2);
      border-radius: 10px 10px 20px 20px;
      overflow: hidden;
      margin: 15px 0;
      .cover {
        width: 100%;
        image {
          width: 100%;
          display: block;
        }
        .playPrice {
          position: absolute;
          bottom: 10px;
          left: 10px;
          border-radius: 4px;
          background-color: rgba(0, 0, 0, 0.6);
          color: white;
          font-size: 10px;
          padding: 3px 5px;
          text {
            margin-left: 3px;
          }
        }
        .info {
          background-color: rgba(0, 0, 0, 0.6);
          color: white;
          position: absolute;
          top: 10px;
          left: 0;
          border-radius: 15px;
          padding: 5px 10px;
          .name {
            padding: 0 5px;
          }
        }
        .level {
          position: absolute;
          top: 10px;
          right: 5px;
        }
      }
      .data {
        background-color: white;
        padding: 10px;
        .title {
          margin-bottom: 5px;
        }
        .btn {
          color: white;
          padding: 0 15px;
          height: 25px;
          line-height: 25px;
          border-radius: 12px;
          background: linear-gradient(to bottom, #fb819a, #ed565e);
        }
      }
    }
  }

  .LatestRankings {
    color: #363d4e;
    margin: 10px 0 20px;
  }
}
</style>
